<template>
	<view class="invite-page-bg" :key="refreshKey">
		<view class="one-title animate__shakeX" style="animation-duration: 2s;">
			<view class="icon-l">

			</view>
			<view class="one-text">
				您的资产智能投顾服务专家
			</view>
			<view class="icon-r">

			</view>
		</view>
		<view class="two-title animate__headShake" style="animation-duration: 2s;">
			<view class="two-content">
				邀请注册，即有机会参与抽奖赢取“豪”礼
			</view>
		</view>
		<view class="three-bg animate__swing" style="animation-duration: 2s;">
			<view class="three-content">
				<!-- <view class="three-use">

				</view> -->
				<image :src="formatAvatar()" mode="" class="three-use"></image>
				<view class="three-name">
					{{realName}}的邀请码
				</view>
				<view class="invite-code">
					{{inviteCode}}
				</view>
				<view class="three-qr" @longpress="longpress">
					<uv-qrcode ref="qrcode" h5SaveTip="false" size="256rpx" :value="inviteCode"
						:options="qrcodeOptions"></uv-qrcode>
				</view>
				<view class="">
					长按扫描二维码
				</view>
				<view class="">
					即可下载APP注册账号
				</view>
			</view>
		</view>
		<view class="fixed-bottomx">
			<view class="fixed-bottom-innerx">
				<view class="save-img animate__fadeInRight" type="primary" size="large" @click="saveImg" style="animation-duration: 2s;">保存图片</view>
				<view class="copy-url animate__fadeInLeft" type="primary" size="large" @click="copyData(appDownloadUrl)" style="animation-duration: 2s;">复制邀请链接</view>
			</view>
		</view>
		<!-- <view class="bg-sub">
			<view class="invite-top-tips">
				<view class="invite-top-tip">邀请注册，即有机会</view>
				<view class="invite-top-tip">参与抽奖赢取"豪"礼</view>
			</view>
			<view class="invite-code-label">
				您的推广ID：
			</view>
			<view class="invite-code-value">{{inviteCode}}</view>
			<view v-if="inviteCode">
				<uv-qrcode ref="qrcode" size="256rpx" :value="inviteCode" :options="qrcodeOptions"></uv-qrcode>
			</view>
			<view class="download-desc">
				<view>扫描二维码</view>
				<view>下载APP注册账号</view>
			</view>
			<view class="invite-actions">
				<view class="invite-action" @click="copyData(inviteCode)">
					<view class="invite-action-label">复制推广码</view>
				</view>
				<view class="invite-action" @click="copyData(appDownloadUrl)">
					<view class="invite-action-label">复制下载链接</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import common from '@/common/common'
	export default {
		data() {
			return {
				qrcodeOptions: {
					margin: 6,
				},
				inviteCode: '',
				realName: '',
				appDownloadUrl: '',
				avatar:null,
				refreshKey:0
			}
		},
		onLoad() {
			this.getMemberInfo();
			this.getAppDownloadUrl();
		},
		onShow(){
			this.refreshKey += 1;
		},
		methods: {
			formatAvatar() {
				return this.avatar ? this.avatar :
					'../../static/img/mj/user-img.png';
			},
			longpress() {
				//#ifdef H5
				this.$refs.qrcode.toTempFilePath({
					success: res => {
						console.log(111, res);
						const aEle = document.createElement('a');
						aEle.download = 'uQRCode'; // 设置下载的文件名，默认是'下载'
						aEle.href = res.tempFilePath;
						document.body.appendChild(aEle);
						aEle.click();
						aEle.remove(); // 下载之后把创建的元素删除
					}
				});
				//#endif
				// #ifdef APP-PLUS
				// this.$refs.qrcode.toTempFilePath({
				// 	success: res => {
				// 		console.log(111, res);
				// 		uni.saveImageToPhotosAlbum({
				// 			filePath: res.tempFilePath,
				// 			success: () => {
				// 				uni.hideLoading();
				// 				uni.showToast({
				// 					title: "图片已保存"
				// 				});
				// 			},
				// 			fail: () => {
				// 				uni.hideLoading();
				// 				uni.showToast({
				// 					icon: 'none',
				// 					title: "图片保存失败"
				// 				});
				// 			}
				// 		});
				// 	}
				// });
				// #endif
			},
			saveImg() {
				this.$refs.qrcode.save({
					success: (res) => {
						console.log(res);
					},
					fail: err => {
						console.log(err)
					}
				});
			},
			getAppDownloadUrl() {
				var that = this;
				uni.$uv.http.get('/setting/getAppDownloadUrl').then(res => {
					that.appDownloadUrl = res.data;
				});
			},

			copyData(data) {
				common.copyData(data);
			},

			getMemberInfo() {
				var that = this;
				uni.$uv.http.get('/member/getMemberInfo').then(res => {
					that.inviteCode = res.data.inviteCode;
					that.realName = res.data.realName;
					that.avatar = res.data.avatar;
				});
			},
		}
	}
</script>

<style lang="less">
page {
	height: auto !important;
	background: url('/static/img/my_bg.png') no-repeat;
	background-size: 100% 100%;
	background-color: #FFFFFF;
}
	.invite-page-bg {
		// height: calc(100% + 44px + env(safe-area-inset-top)) !important;
		padding: 60rpx 24rpx 0;
		padding-top: calc(44px + env(safe-area-inset-top));
		box-sizing: border-box;
		margin-top: calc(-44px - env(safe-area-inset-top));
		padding-bottom: 130rpx;

		.one-title {
			margin-top: 100rpx;
			display: flex;
			font-weight: bold;
			font-size: 32rpx;
			color: #000;
			line-height: 32rpx;
			letter-spacing: 1px;
			text-align: center;
			font-style: normal;
			text-transform: none;
			align-items: center;
			justify-content: center;

			.one-text {
				margin: 0 16rpx;
			}

			.icon-l {
				width: 72rpx;
				height: 4rpx;
				background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #000 100%);
				border-radius: 30rpx 30rpx 30rpx
			}

			.icon-r {
				width: 72rpx;
				height: 4rpx;
				background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #000 100%);
				border-radius: 30rpx 30rpx 30rpx 30rpx;
			}
		}

		.two-title {
			// width: 600rpx;
			margin-top: 44rpx;
			margin-bottom: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.two-content {
				background: linear-gradient(270deg, rgba(228, 212, 148, 0) 0%, rgba(228, 212, 148, 0.2) 50%, rgba(228, 212, 148, 0) 100%);
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				padding: 12rpx 84rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #000;
				line-height: 24rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
		}

		.three-bg {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 100rpx;

			.three-content {
				width: 580rpx;
				height: 814rpx;
				border-radius: 28rpx 28rpx 28rpx 28rpx;
				background-image: url('../../static/img/mj/invite-bg.png');
				background-size: 100% 100%;
				background-position: center;
				padding: 80rpx 0 60rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-direction: column;
				font-weight: 400;
				font-size: 20rpx;
				color: rgba(11, 19, 39, 0.4);
				line-height: 32rpx;
				letter-spacing: 1px;
				text-align: center;
				font-style: normal;
				text-transform: none;

				.three-use {
					width: 120rpx;
					height: 120rpx;
					// background-image: url('../../static/img/mj/user-img.png');
					background-size: 100% 100%;
					background-position: center;
					margin-bottom: 32rpx;
				}

				.three-name {
					font-weight: bold;
					font-size: 32rpx;
					color: #0B1327;
					line-height: 32rpx;
					letter-spacing: 1px;
					text-align: center;
					font-style: normal;
					text-transform: none;
					margin-bottom: 20rpx;
				}
				.invite-code{
					font-weight: bold;
					font-size: 32rpx;
					color: #0B1327;
					line-height: 32rpx;
					letter-spacing: 1px;
					text-align: center;
					font-style: normal;
					text-transform: none;
					margin-bottom: 20rpx;
				}

				.three-qr {
					background: #FFFFFF;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					border: 12rpx solid rgba(228, 212, 148, 0.4);
					margin-bottom: 28rpx;
				}
			}
		}

		.fixed-bottomx {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.fixed-bottom-innerx {
			display: flex;
			width: 580rpx;
			justify-content: space-between;

			.save-img {
				// .uv-button--primary {
				background: rgba(255, 255, 255, 0.2);
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				border-color: rgba(255, 255, 255, 0.2);
				width: 236rpx;
				height: 80rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #0B1327;
				line-height: 32rpx;
				letter-spacing: 1px;
				text-align: center;
				font-style: normal;
				text-transform: none;
				line-height: 80rpx;
				// }
			}

			.copy-url {
				// .uv-button--primary {
				width: 304rpx;
				height: 80rpx;
				background: linear-gradient(180deg, #FFF9C3 0%, #FFB637 100%);
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				border-color: #FFB637;
				font-weight: bold;
				font-size: 32rpx;
				color: #0B1327;
				line-height: 32rpx;
				letter-spacing: 1px;
				text-align: center;
				font-style: normal;
				text-transform: none;
				line-height: 80rpx;
				// }
			}
		}
	}


	.invite-top-tips {
		margin-top: 160rpx;
		padding-bottom: 64rpx;
	}

	.invite-top-tip {
		color: #f1d185;
		font-size: large;
		letter-spacing: 4rpx;
		font-weight: bold;
		line-height: 1.5;
	}

	.invite-actions {
		color: #f1d185;
		display: flex;
		text-align: center;
		align-items: center;
		padding-top: 120rpx;
	}

	.invite-action {
		margin-left: 48rpx;
		margin-right: 48rpx;
	}

	.invite-action-icon {}

	.invite-action-label {
		font-size: small;
		padding-top: 8px;
	}

	.download-desc {
		margin-top: 60rpx;
		text-align: center;
		color: rgba(241, 209, 133, .5);
		font-size: smaller;
	}

	.invite-code-label {
		color: rgba(241, 209, 133, .5);
		text-align: center;
	}

	.invite-code-value {
		margin-top: 24rpx;
		background: #f1d185;
		border-radius: 200rpx;
		color: #141519;
		font-style: normal;
		font-size: 40rpx;
		text-align: center;
		padding-left: 56rpx;
		padding-right: 56rpx;
		padding-top: 12rpx;
		padding-bottom: 12rpx;
		margin-bottom: 48rpx;
	}

	.bg-sub {
		background: url('/static/img/invite_bg_sub.png') no-repeat;
		display: flex;
		align-items: center;
		flex-direction: column;
		background-size: 100% 100%;
		border-radius: 64rpx;
		margin: 32rpx;
		padding-bottom: 32rpx;
	}
</style>